<template>
  <div id="app">
    <div class="main-top">
      <el-menu theme="dark" mode="horizontal" router="true">
        <el-menu-item index="/ownMsg/msgList" v-if="inItemArr('msgList', showItem)">list</el-menu-item>
        <el-menu-item index="/ownMsg/addMsg" v-if="inItemArr('addMsg', showItem)">addMsg</el-menu-item>
        <!--<el-menu-item index="/ownMsg/msgList/msgContent">content</el-menu-item>-->
        <el-menu-item index="/index/login" v-if="inItemArr('login', showItem)">login</el-menu-item>
        <el-menu-item index="/index/register" v-if="inItemArr('register', showItem)">register</el-menu-item>
        <el-menu-item index="/index/home-page" style="float:right" v-if="haveLogin"><i class="el-icon-document"></i>{{userInfo.name}}</el-menu-item>
      </el-menu>
    </div>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Element from 'element-ui'
  import 'element-ui/lib/theme-default/index.css'
  Vue.use(Element)

  export default {
    name: 'app',
    data: function () {
      return {
        active: true
      }
    },
    computed: {
      haveLogin () {
        return this.$store.state.user.haveLogin
      },
      userInfo () {
        return this.$store.state.user.info
      },
      showItem () {
        let retItem = []
        if (this.$store.state.user.haveLogin) {
          retItem = ['msgList', 'addMsg', 'register']
        } else {
          retItem = ['login', 'register']
        }
        return retItem
      }
    },
    created: function () {
      // this.$router.push('/ownMsg/msgList')
    },
    watch: {
      '$route': function (to, from) {
        if (to.path === '/ownMsg/msgList') {
          this.active = true
        } else if (to.path === '/ownMsg/msgList/msgContent') {
          this.active = false
        }
      }
    },
    methods: {
      inItemArr (itemName, showItemArr) {
        for (let i = 0; i < showItemArr.length; i++) {
          if (itemName === showItemArr[i]) {
            return true
          }
        }
        return false
      }
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
